<div data-page="cinemaroomtype" class="page"
     data-cinema-code="{{data.rows.cinema_code}}"
     data-roomtype-id="{{data.rows.roomtype_id}}"
     data-booking-start="{{data.rows.app_booking_start}}"
     data-booking-end="{{data.rows.app_booking_end}}"
     data-start-timezone="{{data.rows.booking_start_timezone}}"
     data-add-timezone="{{data.rows.booking_add_timezone}}"
     data-people-limit="{{data.rows.people_limit}}">
    <style>
        label.label-radio input[type=checkbox]:checked ~ .item-inner, label.label-radio input[type=radio]:checked ~ .item-inner {
            background: no-repeat center;
            background: #ffcc00;
            text-align: center;
            border-radius: 10px;
        }
        label.label-radio input[type=checkbox] ~ .item-inner, label.label-radio input[type=radio] ~ .item-inner {
            padding-right: 0px;
        }
        .ks-carousel-slider .swiper-slide {
            box-sizing: border-box;
            background: rgba(255, 204, 0, 0.25);
            text-align: center;
            border: 1px solid #ffcc00;
            border-radius: 10px;
            display: block;
        }
    </style>
    <div class="page-content">
        <img src="{{data.rows.roomtype_pic}}" style="width: 100%;height: 50vw;" onerror="onAlbumPosterError(this)">
        <div class="content-block" style="margin-top: 0;margin-bottom: 5px">
            <div class="content-block-inner">
                <div class="row">
                    <p class="col-55" style="font-weight: 600;margin:3px 0">{{data.rows.roomtype_name}}</p>
                    <p class="col-45 color-custom" style="text-align: right;margin:3px 0">{{formatPrice data.rows.roomtype_price}}</p>
                </div>
                <p style="margin: 2px">营业时间：{{data.rows.app_booking_start}} - {{data.rows.app_booking_end}}</p>
                <p style="margin: 2px">最多人数：{{data.rows.people_limit}} 人</p>
            </div>
        </div>
        <form id="booking-form">
            <div class="content-block" style="margin-top:5px;margin-bottom: 0;">
                <div class="content-block-inner">
                    <div data-pagination=".swiper-pagination-c3" data-space-between="10" data-slides-per-view="4.5"
                         class="swiper-container swiper-init ks-carousel-slider">
                        <div class="swiper-wrapper">
                            {{#each data.rows.dates}}
                                <div class="swiper-slide">
                                    <label class="label-radio item-content">
                                        <input type="radio" name="bookingDate" value="{{year}}-{{date}}"
                                               {{#if @first}}checked="checked"{{/if}}>
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <small>{{week}}</small>
                                            </div>
                                            <div class="item-subtitle">{{date}}</div>
                                        </div>
                                    </label>
                                </div>
                            {{/each}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="list-block" style="margin-top: 0;margin-bottom: 5px">
                <ul>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">到店时间</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请选择到店时间" readonly="readonly"
                                           name="startTime" id="startTime"/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!--<li>-->
                    <!--<div class="item-content">-->
                    <!--<div class="item-inner">-->
                    <!--<div class="item-title label">观影时长</div>-->
                    <!--<div class="item-input">-->
                    <!--<input type="text" placeholder="请选择观影时长" readonly="readonly"-->
                    <!--name="watchingMinutes" id="watchingMinutes"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</li>-->
                    <!--<li>-->
                    <!--<div class="item-content">-->
                    <!--<div class="item-inner">-->
                    <!--<div class="item-title label">观影人数</div>-->
                    <!--<div class="item-input">-->
                    <!--<input type="text" placeholder="请选择观影人数" readonly="readonly" name="numbers"-->
                    <!--id="numbers"/>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</li>-->
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">联系人</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请填写联系人" name="bookingContact"
                                           id="bookingContact" maxlength="30"/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">联系电话</div>
                                <div class="item-input">
                                    <input type="tel" placeholder="请填写联系电话" name="bookingCode"
                                           id="bookingCode" maxlength="11" value="{{data.phoneNumber}}"/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title label">留言</div>
                                <div class="item-input">
                                    <input type="text" placeholder="请填写留言" name="userComment"
                                           id="userComment" maxlength="30"/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#" class="list-button item-link color-custom booking-submit">预约</a></li>
                </ul>
            </div>
        </form>
    </div>
</div>